<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>调查问卷</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app" v-cloak>
        <div v-show='page==1'>
            <div>1.请问您的性别是：</div>
            <div>
                <v-radio label='man' v-model='radioVal'>男</v-radio>
                <v-radio label='woman' v-model='radioVal'>女</v-radio>
                <v-radio label='wait' v-model='radioVal'>保留</v-radio>
            </div>
            <v-button type='primary' :disabled='radioVal?false:true' @on_click='next'>下一步</v-button>
            <v-button type='default' @on_click='reset(1)'>重置</v-button>
        </div>
        <div v-show='page==2'>
            <div>2.请选择您的兴趣爱好：</div>
            <div>
                <label for="readBook" class='checkbox'>
                    <input type="checkbox" id="readBook" class="checkbox_none" value="readBook" v-model='checkboxVal'>
                    <span class='checkbox_input'></span>
                    看书
                </label>
                <label for="swim" class='checkbox'>
                    <input type="checkbox" id="swim" class="checkbox_none" value="swim" v-model='checkboxVal'>
                    <span class='checkbox_input'></span>
                    游泳
                </label>
                <label for="run" class='checkbox'>
                    <input type="checkbox" id="run" class="checkbox_none" value="run" v-model='checkboxVal'>
                    <span class='checkbox_input'></span>
                    跑步
                </label>
                <label for="watchMovie" class='checkbox'>
                    <input type="checkbox" id="watchMovie" class="checkbox_none" value="watchMovie" v-model='checkboxVal'>
                    <span class='checkbox_input'></span>
                    看电影
                </label>
                <label for="listenMusic" class='checkbox'>
                    <input type="checkbox" id="listenMusic" class="checkbox_none" value="listenMusic" v-model='checkboxVal'>
                    <span class='checkbox_input'></span>
                    听音乐
                </label>
            </div>
            <v-button type='primary' :disabled='checkboxVal.length?false:true' @on_click='next'>下一步</v-button>
            <v-button type='default' @on_click='prev'>上一步</v-button>
            <v-button type='default' @on_click='reset(2)'>重置</v-button>
        </div>
        <div v-show='page==3'>
            <div>3.请介绍一下自己：</div>
            <div>
               <textarea name="" id="" cols="35" rows="8" placeholder="不少于100字" minlength="100" v-model='text' class="textClass"></textarea>
            </div>
            <v-button type='primary' :disabled='text.length<100?true:false'>提交</v-button>
            <v-button type='default' @on_click='prev'>上一步</v-button>
            <v-button type='default' @on_click='reset(3)'>重置</v-button>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="button.js"></script>
    <script src="radio.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                disabled:false,
                page:1,
                radioVal:'',
                checkboxVal:[],
                text:''
            },
            methods:{
                reset(val){
                   if (val===1) {
                       this.radioVal=''
                   }
                   if (val===2) {
                       this.checkboxVal=[]
                   }
                   if (val===3) {
                       this.text=''
                   }
                },
                next(){
                    this.page++
                },
                prev(){
                    this.page--
                }
            },
        })
    </script>
</body>
</html>